<script setup lang='ts'>
import axios, { type AxiosResponse } from 'axios'
import { onMounted, ref } from 'vue';

type BannerList = {
    imgUrl: string
}[]
interface Result {
    code: string,
    msg: string,
    result: BannerList
}
const list = ref<BannerList>([])
const getBanner = async () => {
    const res = await axios.get<null, AxiosResponse<Result>>('https://meikou-api.itheima.net/home/banner')
    list.value = res.data.result
}
onMounted(() => {
    getBanner()
})
const person = ref<{
    name:string
    age:number
}>({
    name:'张三',
    age:20
})
</script>

<template>
<div class="container">
    <!-- 循环生成谁就在谁上面写v-for -->
    <img v-for="(item) in list" :src="item.imgUrl" :key="item.imgUrl">
</div>
<p>
    <ul>
        <!-- v-for遍历对象也可以 -->
        <li v-for="(value,key) in person" :key="key">{{ value }} - {{ key }}</li>
    </ul>
    <ul>
        <!-- v-for可以遍历数字 -->
        <li v-for="item in 100" :key="item">{{ item }}</li>
    </ul>
</p>
</template>

<style scoped>
.container {
    width: 100%;
    height: 200px; 
    display: flex;
}
.container img {
    width: 300px;
    height: 100%;
    margin: 10px 20px;
}
</style>